<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js"></script>
		<script type="text/javascript" src="../../scripts/menu/RangeMenu.js"></script>
		<script type="text/javascript" src="../../scripts/grid/GridFilters.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/Filter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
		
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/imageViewer.js"></script>
        <script type="text/javascript">
        	var aoMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessoryothers');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var ctAccessoryType = new i18nMessage('../../servlet/CodeTableServlet?name=CtAccessoryType');
			var ctApplicationType = new i18nMessage('../../servlet/CodeTableServlet?name=CtApplicationType');
			var ctAccessoryType = new i18nMessage('../../servlet/CodeTableServlet?name=CtAccessoryType');
			var ctMaterialType = new i18nMessage('../../servlet/CodeTableServlet?name=CtMaterialType');
			var ctSupplyType = new i18nMessage('../../servlet/CodeTableServlet?name=CtSupplyType');
			var ctYesno = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			
			var store;
            var grid;
            
            var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/BiAccessoryOthersServlet?action=2&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                store.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			Ext.onReady(function(){
                
                store = new Ext.data.Store({
                    url: '../../servlet/BiAccessoryOthersServlet?action=4',
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'applicationReference', 'accessoryReference', 'ctApplicationType', 'ctAccessoryType', 'ctMaterialType', 
					'ctSupplyType','isApplication', 'comment',
					 'photo1Name', 'photo2Name',{
					 	name: 'biFranceCustomer.name',
					 	mapping: 'customerName'
					 }, {
					 	name: 'biFranceCustomer.department',
					 	mapping: 'customerDepartment'
					 }, 'factoryNameCN','factoryNameEN', 'ctCareLabelMaterial1', 'percentage1','ctCareLabelMaterial2', 'percentage2','ctCareLabelMaterial3', 'percentage3','ctCareLabelMaterial4', 'percentage4','ctCareLabelMaterial5', 'percentage5', 'descriptionCN','descriptionFR','descriptionEN'
					 ,'customerReference', 'customerColor',
					 'factoryReference', 'factoryColor','id']),
                    
                    remoteSort: true
                });
			
				store.setDefaultSort('id', 'desc');
				
				var filters = new Ext.grid.GridFilters({
					  filters:[
					    {type: 'string',  dataIndex: 'applicationReference'},
						{type: 'string',  dataIndex: 'customerReference'},
						{type: 'string',  dataIndex: 'customerColor'},
						{type: 'string',  dataIndex: 'accessoryReference'},
						{type: 'string',  dataIndex: 'customerReference'},
						{type: 'string',  dataIndex: 'customerColor'},{
						      type: 'list',  
						      dataIndex: 'ctAccessoryType', 
						      options: ctAccessoryType.getCtArray()
					    },{
						      type: 'list',  
						      dataIndex: 'ctApplicationType', 
						      options: ctApplicationType.getCtArray()
					    },{
						      type: 'list',  
						      dataIndex: 'ctMaterialType', 
						      options: ctMaterialType.getCtArray()
					    },{
						      type: 'list',  
						      dataIndex: 'ctSupplyType', 
						      options: ctSupplyType.getCtArray()
					    },
						{type: 'string', dataIndex: 'biFranceCustomer.name'},
						{type: 'string', dataIndex: 'biFranceCustomer.department'},
						{type: 'string', dataIndex: 'biFactory.nameCN'},
						{type: 'string', dataIndex: 'biFactory.nameEN'}
				]});
				
				var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
						'<br/>',
						'<b>' + message.get('message.edit.factoryname') + ':</b>&nbsp;&nbsp;{factoryNameCN}&nbsp;&nbsp;&nbsp;&nbsp;{[values.factoryNameEN=="null"?"":values.factoryNameEN]}',
						//'<b>' + aoMessage.get('ui.accessoryothers.factoryreference') + ':</b>&nbsp;&nbsp;{factoryReference}&nbsp;&nbsp;&nbsp;&nbsp;',
						//'<b>' + aoMessage.get('ui.accessoryothers.factorycolor') + ':</b>&nbsp;&nbsp;{factoryColor}&nbsp;&nbsp;&nbsp;&nbsp;',
						'</p><br/>',
						'{[this.getCareLabel(values)]}',
			        	'<p><img src="../../_temp/{photo1Name}" width="150px" style="cursor: hand;" onclick="openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;',
						'<img src="../../_temp/{photo2Name}" width="150px" style="cursor: hand;" onclick="openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;',
						'</p>', 
						'<br/><p><b>' + message.get('message.edit.descriptionfr') + ':</b> {descriptionFR}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptioncn') + ':</b> {descriptionCN}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptionen') + ':</b> {descriptionEN}</p><br/>',{
							     getCareLabel: function(values){
							     	 var rtn = '';
							     	 rtn += '<p>';
								     if(values.ctCareLabelMaterial1 != ''){
										 rtn += '<b>' + aoMessage.get('ui.accessoryothers.set3') + '1:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial1 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
										 rtn += message.get('message.edit.precentage') + '1&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage1
								     }
								     if(values.ctCareLabelMaterial2 != ''){
										 rtn += '<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +aoMessage.get('ui.accessoryothers.set3') + '2:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial2 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
										 rtn += message.get('message.edit.precentage') + '2&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage2
								     }
								     if(values.ctCareLabelMaterial3 != ''){
										 rtn += '<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +aoMessage.get('ui.accessoryothers.set3') + '3:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial3 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
										 rtn += message.get('message.edit.precentage') + '3&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage3
								     }
								     if(values.ctCareLabelMaterial4 != ''){
										 rtn += '<br/><br/><b>' + aoMessage.get('ui.accessoryothers.set3') + '4:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial4 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
										 rtn += message.get('message.edit.precentage') + '4&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage4
								     }
								     if(values.ctCareLabelMaterial5 != ''){
										 rtn += '<b>&nbsp;&nbsp;&nbsp;&nbsp;' + aoMessage.get('ui.accessoryothers.set3') + '5:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial5 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
										 rtn += message.get('message.edit.precentage') + '5&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage5
								     }
								     rtn += '</p><br/>'
								     return rtn;
						         
						     }
						}
			        )
			    });
			
				grid = new Ext.grid.GridPanel({
                    title: aoMessage.get('ui.accessoryothers.listtitle'),
                    store: store,
					stripeRows: true,
					plugins: [expander, filters],
                    height: 560,
                    columns: [expander,{
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false
                    },{
                        header: message.get('message.edit.buyer'),
                        dataIndex: 'ctSupplyType',
                        sortable: true
                    },{
                        header: aoMessage.get('ui.accessoryothers.application'),
                        dataIndex: 'ctApplicationType',
                        sortable: true
                    },{
                        header: aoMessage.get('ui.accessoryothers.reference'),
                        dataIndex: 'applicationReference',
                        sortable: true
                    },{
                        header: aoMessage.get('ui.accessoryothers.type'),
                        dataIndex: 'ctAccessoryType',
                        sortable: true
                    },{
                        header: aoMessage.get('ui.accessoryothers.reference'),
                        dataIndex: 'accessoryReference',
                        sortable: true
                    },{
                        header: fcMessage.get('ui.francecustomer.name'),
                        dataIndex: 'biFranceCustomer.name',
                        sortable: true
                    },{
                        header: fcMessage.get('ui.francecustomer.department'),
                        dataIndex: 'biFranceCustomer.department',
                        sortable: true
                    },{
                        header: aoMessage.get('ui.accessoryothers.customerreference'),
                        dataIndex: 'customerReference',
                        sortable: true
                    },{
                        header: aoMessage.get('ui.accessoryothers.customercolor'),
                        dataIndex: 'customerColor',
                        sortable: true
                    },{
                        header: message.get('message.list.eidt'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderDelete
                    }],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'biAccessoryOthers',
                    bbar: new Ext.PagingToolbar({
                        pageSize: 20,
                        store: store,
                        displayInfo: true
                    })
                });
                
                var startPage = getPrarmeterValue(window.location, 'startPage');
                var start;
                if (startPage == null || startPage == '') {
                    start = 0;
                }
                else {
                    start = (startPage - 1) * 20;
                }
                store.load({
                    params: {
                        start: start,
                        limit: 20
                    }
                });
				
                function renderEdit(value, p, record){
                    return String.format('<a href="accessory_others_edit.html?id={0}&startPage={1}" target="_self"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id, Math.floor((record.data.index - 1) / 20) + 1);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
                }
				/*
				var detailWin;
                grid.on('rowdblclick', function(grid, rowIndex, e){
                    if (!detailWin) {
                        detailWin = new Ext.Window({
                            title: message.get('message.window.detail'),
                            layout: 'fit',
                            width: 680,
                            height: 380,
                            closeAction: 'hide',
                            plain: true,
                            items: [{
                                id: 'detailPanel',
                                region: 'center',
                                bodyStyle: {
                                    background: '#ffffff',
                                    padding: '7px'
                                },
                                html: message.get('message.window.empty')
                            }]
                        });
                    }
                    
                    detailWin.show(this);
                    var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.list.id'),
							'</td><td>{id}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.reference'),
							'</td><td>{reference}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.edit.stock'),
							'</td><td>{stock}</td>',
							'<td style="background:#eeeeee;">',
							aoMessage.get('ui.accessoryothers.type'),
							'</td><td>{ctAccessoryType}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.edit.materialtype'),
							'</td><td>{ctMaterialType}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.isspecial'),
							'</td><td>{isSpecial}</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							message.get('message.edit.customername'),
							'</td><td>' + grid.getStore().getAt(rowIndex).data['biFranceCustomer.name'] + '&nbsp;-&nbsp;' + grid.getStore().getAt(rowIndex).data['biFranceCustomer.department'] + '</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.factoryname'),
							'</td><td>' + grid.getStore().getAt(rowIndex).data['biFactory.name'] + '</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							message.get('message.edit.comment'),
							'</td><td colspan="3">{comment}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.edit.photo'),
							'</td><td><img id="customImg" height="180" src="../../_temp/{photoName}"></td><td style="background:#eeeeee;">',
							aoMessage.get('ui.accessoryothers.bindphoto'),
							'</td><td><img id="customImg1" height="180" src="../../_temp/{bindPhotoName}"></td></tr>',
						'</tbody></table><div id="itemList"></div>'
					];
                    var itemTpl = new Ext.Template(itemTplMarkup);
                    var detailPanel = Ext.getCmp('detailPanel');
                    itemTpl.overwrite(detailPanel.body, grid.getStore().getAt(rowIndex).data);
				});
				*/
			});
        
        </script>
	</head>
	<body>
	 	<div id="biAccessoryOthers">
        </div>
	</body>
</html>